<template>
  <div class="overflow-x-hidden">
    <el-row :gutter="20" class="m-t-5px">
      <AppCard></AppCard>
      <el-col :span="24" class="m-t-5px">
        <el-card class="rounded-md" shadow="hover">
          <template #header>
            日交易趋势
          </template>
          <AppTradeChart></AppTradeChart>
        </el-card>
      </el-col>
      <el-col :span="12" :lg="12" :md="12" :sm="24" :xs="24" class="m-t-5px">
        <el-card class="rounded-md" shadow="hover">
          <template #header>
            地区异常订单排行
          </template>
          <AppLeftChart></AppLeftChart>
        </el-card>
      </el-col>
      <el-col :span="12" :lg="12" :md="12" :sm="24" :xs="24" class="m-t-5px">
        <el-card class="rounded-md" shadow="hover">
          <template #header>
            近10日订单量
          </template>
          <AppRightChart></AppRightChart>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="m-t-5px">
      <el-col :span="12" :lg="12" :md="12" :sm="24" :xs="24">
        <el-card class="rounded-md" shadow="hover">
          <AppTimeline1></AppTimeline1>
        </el-card>
      </el-col>
      <el-col :span="12" :lg="12" :md="12" :sm="24" :xs="24">
        <el-card class="rounded-md" shadow="hover">
          <AppTimeline2></AppTimeline2>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts" name="homePage">
import { getDayText } from "@/utils/random.ts";
import { AppNoticeSuccess } from "@/utils/app.ts";
import AppCard from "./components/AppCard.vue";
import AppTradeChart from "./components/AppTradeChart.vue";
import AppLeftChart from "./components/AppLeftChart.vue";
import AppRightChart from "./components/AppRightChart.vue";
import AppTimeline1 from "./components/AppTimeline1.vue";
import AppTimeline2 from "./components/AppTimeline2.vue";
import { onMounted } from "vue";
onMounted(() => {
  // 时间问候语
  AppNoticeSuccess(getDayText(), "欢迎回来~");
});
</script>
<style lang="scss" scoped></style>
